<template>
	<rui-card>
		<view class="head" v-if="is_login"  @click="$to('/pages/user/index/index')">
			<view class="avatar">
				<uni-icons type="contact-filled" size="60" color="#ddd"></uni-icons>
			</view>
			<view class="info">
				<view class="name">
					捣蛋小鸟
				</view>
				<view class="">
					<rui-user-grade :grade="2"></rui-user-grade>
					<view class="tag">
						欢迎使用旅游查询系统！
					</view>
				</view>
				<view class="seting" @click.stop="$to('/pages/user/seting/seting')">
					<uni-icons type="gear-filled" size="20" color="#f30"></uni-icons>
				</view>
			</view>
		</view>
		<view class="head" v-else>
			<view class="avatar">
				<uni-icons type="contact-filled" size="60" color="#999"></uni-icons>
			</view>
			<view class="info">
				<view class="name">
					注册/登录
				</view>
				<view class="tag">
					登录够可以解锁更多功能
				</view>
			</view>
		</view>
		
	</rui-card>
</template>

<script setup>
	import {ref} from "vue"
	
	let is_login = ref(true)
	
</script>

<style lang="scss" scoped>
	.head{
		display: flex;
		align-items: center;
		position: relative;

		.seting{
			position: absolute;
			top: 50%;
			right: 0;
			transform: translate(0, -50%);
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
		}
		.avatar{
			margin-right: 10rpx;
		}
		.info{
			.name{
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 5rpx;
			}
			.tag{
				font-size: 22rpx;
				background: #eee;
				color: #999;
				padding: 2rpx 15rpx;
				border-radius: 20rpx;
				display: inline-flex;
			}
		}
	}
</style>